@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonFunction';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$sizes: 's', 'm', 'l';

$typography-primary: (
  's': $sans-label-m,
  'm': $sans-label-l,
  'l': $sans-title-m,
);

$typography-secondary: (
  's': $light-label-m,
  'm': $light-label-l,
  'l': $light-title-m,
);

$button-size: (
  's': 'xs',
  'm': 's',
  'l': 'm',
);

$containerSize: 1px;

.separatorWithLabel {
  display: flex;
  gap: $dimension-1m;
  align-items: flex-end;

  box-sizing: border-box;
  width: 100%;
  min-width: 100%;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($drop-list, 'item', $size, 'container-separator-subheader');

      .label {
        &[data-mode='primary'] {
          @include composite-var(simple-var($typography-primary, $size));
        }
        &[data-mode='secondary'] {
          @include composite-var(simple-var($typography-secondary, $size));
        }
      }
    }
  }
}

.separatorWithoutLabel {
  display: flex;
  align-items: flex-end;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($drop-list, 'item', $size, 'container-separator');
    }
  }

  box-sizing: border-box;
}

.label {
  overflow: hidden;
  flex-shrink: 1;

  &[data-mode='primary'] {
    color: $sys-neutral-text-main;
  }

  &[data-mode='secondary'] {
    color: $sys-neutral-text-light;
  }
}

hr.divider {
  flex: 1;
  width: auto;
  min-width: 0;
}

.selectButton {
  display: flex;
  justify-content: flex-end;

  &[data-weight='primary'] {
    --divider-height: #{$containerSize};
  }

  &[data-weight='secondary'] {
    --divider-height: #{calc($containerSize / 2)};
  }

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      transform: translateY(
        calc(
          (
              simple-var(
                  $button-function,
                  'container',
                  simple-var($button-size, $size),
                  'label-only',
                  'height'
                ) - simple-var($theme-variables, 'sans', 'label', $size, 'line-height')
            ) /
            2 - var(--divider-height, 0)
        )
      );
    }
  }
}
